import { useNavigate } from 'react-router-dom';
import { useGameStore } from '../store/gameStore';
import { levelConfigs, getLevelsByMode } from '../data/levels';
import { ArrowLeft, Star, Lock, Play } from 'lucide-react';

export default function LevelSelect() {
  const navigate = useNavigate();
  const { playerProgress } = useGameStore();

  const campaignLevels = getLevelsByMode('campaign');
  const endlessLevels = getLevelsByMode('endless');
  const puzzleLevels = getLevelsByMode('puzzle');

  const renderLevelCard = (level: any, index: number) => {
    const progress = playerProgress[level.id];
    const isUnlocked = index === 0 || playerProgress[campaignLevels[index - 1]?.id]?.unlocked;
    const stars = progress?.stars || 0;
    const bestScore = progress?.bestScore || 0;

    return (
      <div
        key={level.id}
        className={`relative bg-gradient-to-br from-amber-100 to-amber-200 rounded-lg p-6 border-2 transition-all duration-300 group ${
          isUnlocked
            ? 'border-amber-600 hover:border-amber-700 hover:shadow-lg cursor-pointer'
            : 'border-gray-400 opacity-50 cursor-not-allowed'
        }`}
        onClick={() => isUnlocked && navigate(`/game/${level.mode}/${level.id.split('_').pop()}`)}
      >
        {/* 关卡背景装饰 */}
        <div className="absolute inset-0 opacity-10 rounded-lg overflow-hidden">
          <div className="w-full h-full bg-gradient-to-br from-amber-300 to-amber-400"></div>
        </div>

        {/* 锁定图标 */}
        {!isUnlocked && (
          <div className="absolute top-2 right-2">
            <Lock className="w-6 h-6 text-gray-600" />
          </div>
        )}

        {/* 播放图标 */}
        {isUnlocked && (
          <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
            <Play className="w-6 h-6 text-amber-700" />
          </div>
        )}

        {/* 关卡标题 */}
        <h3 className="text-xl font-bold text-amber-900 mb-2 relative z-10">{level.name}</h3>
        
        {/* 关卡信息 */}
        <div className="text-sm text-amber-800 space-y-1 relative z-10">
          <p>模式: {level.mode === 'campaign' ? '战役' : level.mode === 'endless' ? '无尽' : '解谜'}</p>
          <p>波次: {level.waves.length}</p>
          <p>初始棋魂: {level.initialChessSpirit}</p>
        </div>

        {/* 星级评价 */}
        <div className="flex items-center mt-3 relative z-10">
          {[1, 2, 3].map((star) => (
            <Star
              key={star}
              className={`w-5 h-5 ${
                star <= stars ? 'text-yellow-500 fill-current' : 'text-gray-400'
              }`}
            />
          ))}
        </div>

        {/* 最佳分数 */}
        {bestScore > 0 && (
          <p className="text-xs text-amber-700 mt-2 relative z-10">最佳分数: {bestScore}</p>
        )}
      </div>
    );
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-amber-50 to-amber-100">
      {/* 背景装饰 */}
      <div className="absolute inset-0 opacity-10">
        <div className="w-full h-full bg-[url('')] bg-repeat"></div>
      </div>

      {/* 顶部导航 */}
      <div className="relative z-10 p-6">
        <div className="flex items-center justify-between">
          <button
            onClick={() => navigate('/')}
            className="flex items-center gap-2 px-4 py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition-colors"
          >
            <ArrowLeft className="w-5 h-5" />
            返回主菜单
          </button>
          
          <h1 className="text-4xl font-bold text-amber-900 text-center flex-1">
            关卡选择
          </h1>
          
          <div className="w-32"></div> {/* 占位符保持居中 */}
        </div>
      </div>

      {/* 关卡内容 */}
      <div className="relative z-10 px-6 pb-6">
        {/* 战役模式 */}
        <section className="mb-12">
          <h2 className="text-3xl font-bold text-amber-900 mb-6 text-center">
            战役模式
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {campaignLevels.map((level, index) => renderLevelCard(level, index))}
          </div>
        </section>

        {/* 无尽模式 */}
        <section className="mb-12">
          <h2 className="text-3xl font-bold text-amber-900 mb-6 text-center">
            无尽模式
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {endlessLevels.map((level, index) => renderLevelCard(level, index))}
          </div>
        </section>

        {/* 解谜模式 */}
        <section>
          <h2 className="text-3xl font-bold text-amber-900 mb-6 text-center">
            解谜模式
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {puzzleLevels.map((level, index) => renderLevelCard(level, index))}
          </div>
        </section>
      </div>
    </div>
  );
}